<!DOCTYPE html>
<html>

<head>
    <title>Where are my eggs?</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/themes/main.min.css" />
    <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile.structure-1.4.0-rc.1.min.css" />
    <script type="text/javascript" src="js/Box2dWeb-2.1.a.3.js"></script>
    <script src="js/bourke.js"></script>
    <script src="js/triangulate.js"></script>
    <script src="js/util.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
    <style type="text/css">
    div {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    </style>
    <script type="text/javascript">
    function closeWindow() {
        window.close();
    }
    </script>
    <style type="text/css">
    .grid-label {
        text-align:right;
    }
    .grid .ui-radio {
        text-align: center;
    }
    .grid .ui-radio label {
        text-align: center;
    }
    .grid {
        height:100%;
    }
    .bgholder {
        position: relative;
        background-color: #ffd265;
        border-radius: 16px 0 16px 0;
        height:120px;
        margin:12px;
        border:1px #8c7337 solid;
    }
    .bgholder span {
        font-weight:bold;
    }
    .v-e-3 {
        margin-top:15% !important;
    }
    .corner {
        position: absolute;
        width: 64px;
        height: 64px;
        z-index: 4;
    }
    .TL {
        top: -10px;
        left: -10px
    }
    .TR {
        top: -20px;
        right: -10px
    }
    .BL {
        bottom: -10px;
        left: -10px
    }
    .BR {
        bottom: -10px;
        right: -10px
    }
    .rotate {
        transform:rotate(14deg);
        -ms-transform:rotate(14deg);
        -webkit-transform:rotate(14deg);
    }
    .rotate2 {
        transform:rotate(-14deg);
        -ms-transform:rotate(-14deg);
        -webkit-transform:rotate(-14deg);
    }
    .divlink {
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index: 1;
    }
    .center {
        display: inline-block;
    }
    .empty {
        width:80% !important;
    }
    </style>
</head>

<body>
    <div data-role='page' id='mainpage' data-theme='a'>
        <div data-role='header'>
            <h1>Welcome!</h1>
        </div>
        <div data-role='content'>
            <div style="text-align:center; margin:10px auto;">
                <img src="images/title.png" draggable='false'>
            </div>
            <div style='width:256px; margin:48px auto;'>
                <div style="position: relative;">
                    <img src='images/egg-2.png' class='corner BR rotate' />
                    <a href='#themeselectpage' data-role='button' data-icon='star' style="margin-top: 24px" draggable='false'>Start</a>
                </div>
                <div style="position: relative;">
                    <img src='images/egg-3.png' class='corner BR rotate2' />
                    <a href='#optionpage' data-role='button' data-icon='gear' style="margin-top: 24px" draggable='false'>Option</a>
                </div>
                <div style="position: relative;">
                    <img src='images/egg-4.png' class='corner TR rotate' />
                    <a href='#' id='quitbtn' data-role='button' data-icon='delete' style="margin-top: 24px" draggable='false'>Quit</a>
                </div>

            </div>
        </div>
        <div data-role='footer'>
            <h1>SMG Fall 2013 NYU</h1>
        </div>
    </div>

    <div data-role='page' id='optionpage' data-theme='a'>
        <div data-role='header'>
            <h1>Option</h1>
        </div>
        <div data-role='content' style="text-align:center;">
            <div class="ui-grid-b grid">
                <div class="ui-block-a">
                </div>
                <div class="ui-block-b">
                    <div data-role='fieldcontain'>
                        <fieldset data-role="controlgroup">
                            <legend>Music:</legend>
                            <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
                            <label for="radio-choice-1">On</label>
                            <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
                            <label for="radio-choice-2">Off</label>
                        </fieldset>
                    </div>
                    <div data-role='fieldcontain'>
                        <fieldset data-role="controlgroup" class='v-e-3'>
                            <legend>Sound Effect:</legend>
                            <input type="radio" name="radio-choice2" id="radio-choice-3" value="choice-3" checked="checked" />
                            <label for="radio-choice-3">On</label>
                            <input type="radio" name="radio-choice2" id="radio-choice-4" value="choice-4" />
                            <label for="radio-choice-4">Off</label>
                        </fieldset>
                    </div>
                    <a href='#mainpage' data-role='button' data-icon='back' draggable='false' class='v-e-3'>Back</a>
                </div>
                <div class="ui-block-c">
                </div>
            </div>
        </div>
        <div data-role='footer'>
            <h1>SMG Fall 2013 NYU</h1>
        </div>
    </div>

    <div data-role='page' id='themeselectpage' data-theme='a'>
        <div data-role='header'>
            <h1>Select Theme</h1>
        </div>
        <div data-role='content' style="text-align:center;">
            <div style="text-align:center">
                <div class="ui-grid-b ">
                    <div class="ui-block-a">
                        <div class='bgholder'>
                            <a href="#mainpage" class='divlink'></a>
                            <span>Theme 1</span>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class='bgholder'>
                            <a href="#mainpage" class='divlink'></a>
                            <span>Theme 2</span>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class='bgholder'>
                            <a href="levelselector.html" rel="external" class='divlink'></a>
                            <span>Theme 3</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align:center">
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <div class='bgholder'>
                            <a href="#mainpage" class='divlink'></a>
                            <span>Theme 4</span>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class='bgholder'>
                            <a href="#mainpage" class='divlink'></a>
                            <span>Theme 5</span>
                        </div>
                    </div>
                    <div class="ui-block-c">
                        <div class='bgholder'>
                            <a href="#mainpage" class='divlink'></a>
                            <span>Theme 6</span>
                        </div>
                    </div>
                </div>
                <a href='#mainpage' data-role='button' data-icon='back' draggable='false'>Back</a>
            </div>
            <!-- <div class='ui-grid-b'>
                <div class='ui-block-a'></div>
                <div class='ui-block-b'>

                </div>
                <div class='ui-block-c'></div>
            </div> -->
        </div>
        <div data-role='footer'>
            <h1>SMG Fall 2013 NYU</h1>
        </div>
    </div>

    <div data-role='page' id='levelpage' data-theme='a'>
        <div data-role='header'>
            <h1>Select Level</h1>
        </div>
        <div data-role='content' style="height:500px;">
            <a href='#mainpage'>Go to page one.</a>
        </div>
        <div data-role='footer'>
            <h1>SMG Fall 2013 NYU</h1>
        </div>
    </div>
</body>


<script type="text/javascript">
$('#quitbtn').click(function() {
    window.close();
});
</script>

</html>
